
<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 引入bootstrap -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/font-awesome.min.css">
<!-- 引入JQuery  bootstrap.js-->
<script src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<html>
<head>
    <title>用户遍历</title>
    <script type="text/javascript">

        //实现重置功能
        function  reset() {
            $("#user_name1").val("");
            $("#telephone1").val("");
        }



    </script>

    <script type="text/javascript">
        if('${message}'!=''){ alert('${message}');}

    </script>




</head>
<body>
    <div class="container" >
    <h1 class="text-center">用户列表信息页面</h1>
        <hr/>
        <br/>

        <form class="form-inline" action="<%=basePath%>/user/findByPage" method="post">
            <div class="form-group">
                <label>用户姓名：</label>
                <input type="text" class="form-control" name="user_name" id="user_name1"/>
            </div>
            &nbsp;&nbsp;
            &nbsp;&nbsp;
            <div class="form-group">
                <label>用户电话</label>
                <input type="text" class="form-control" name="telephone" id="telephone1"/>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-group">
                <input type="submit" value="查询" class="form-control btn btn-info"/>
                &nbsp;&nbsp;

                <input type="reset" value="重置" class="form-control btn btn-danger"/>
                &nbsp;&nbsp;
                <%--<input type="button" value="批量删除" id="emp_del_btn" class="form-control btn btn-danger"   data-toggle="modal" data-target="#delAll"/>--%>

            </div>
        </form>

        <button onclick="del()" class="btn btn-danger">批量删除</button>
        <a href="<%=request.getContextPath()%>/user/findByPage"><span class="btn btn-success">刷新</span></a>
    <br/>
    <hr/>
    <div class="table-responsive">
        <table class="table table-hover table-striped">
            <thead>
            <tr>

                <th ><input id="all" type="checkbox" value=""/> </th>
                <th style="text-align: center;">编号</th>
                <th style="text-align: center;">ID号</th>
                <th style="text-align: center;">姓名</th>
                <th style="text-align: center;">性别</th>
                <th style="text-align: center;">手机号码</th>
                <th style="text-align: center;">地址</th>
                <th style="text-align: center;">操作</th>
            </tr>
            </thead>
            <tbody id="userData">
            <c:forEach items="${requestScope.page.beanList}" var="user">
                <tr class="text-center">
                    <td><input name="idd" id="sll" type="checkbox" value="${user.uid}"/></td>
                    <td>${user.uid}</td>
                    <td>${user.user_id}</td>
                    <td>${user.user_name}</td>
                    <td>${user.sex}</td>
                    <td>${user.telephone}</td>
                    <td>${user.address}</td>
                    <td><!--编辑用户按钮-->
                        <a href="javascript:void(0)" onclick="return edit(${user.uid})" style="text-decoration: none;" >

                          <span class="glyphicon glyphicon-pencil"></span>
                        </a>
                        <!--删除用户按钮-->
                        <a href="javascript:void(0)" onclick="return trash(${user.uid})" style="text-decoration: none;"
                           data-toggle="modal" data-target="#trashModal">
                            <span class="glyphicon glyphicon-trash"></span>
                        </a>

                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
        <form class="listForm" method="post" action="<%=basePath%>/user/findByPage">
            <div class="row">
                <div class="form-inline">
                    <label style="font-size:14px;margin-top:22px;">
                        <strong>共<b>${requestScope.page.totalCount}</b>条记录，共<b>${requestScope.page.totalPage}</b>页</strong>
                        &nbsp;
                        &nbsp;
                        <strong>每页显示</strong>

                        <select class="form-control" name="pageSize">
                            <option value="4"
                                    <c:if test="${requestScope.page.pageSize == 4}">selected</c:if> >4
                            </option>
                            <option value="5"
                                    <c:if test="${requestScope.page.pageSize == 5}">selected</c:if> >5
                            </option>
                            <option value="6"
                                    <c:if test="${requestScope.page.pageSize == 6}">selected</c:if> >6
                            </option>
                            <option value="7"
                                    <c:if test="${requestScope.page.pageSize == 7}">selected</c:if> >7
                            </option>
                        </select>
                        <strong>条</strong>
                        &nbsp;
                        &nbsp;
                        <strong>到第</strong>&nbsp;<input type="text" size="3" id="page" name="pageCode"
                                                        class="form-control input-sm"
                                                        style="width:11%"/>&nbsp;<strong>页</strong>
                        &nbsp;
                        <button type="submit" class="btn btn-sm btn-info">搜索</button>
                    </label>

                    <ul class="pagination" style="float:right;">
                        <li>
                            <a href="<%=basePath%>/user/findByPage?pageCode=1"><strong>首页</strong></a>
                        </li>
                        <li>
                            <c:if test="${requestScope.page.pageCode > 2}">
                                <a href="<%=basePath%>/user/findByPage?pageCode=${requestScope.page.pageCode - 1}">&laquo;</a>
                            </c:if>
                        </li>
                        <!-- 写关于分页页码的逻辑 -->
                        <c:choose>
                            <c:when test="${requestScope.page.totalPage <= 5}">
                                <c:set var="begin" value="1"/>
                                <c:set var="end" value="${requestScope.page.totalPage}"/>
                            </c:when>
                            <c:otherwise>
                                <c:set var="begin" value="${requestScope.page.pageCode - 1}"/>
                                <c:set var="end" value="${requestScope.page.pageCode + 3}"/>

                                <!-- 头溢出 -->
                                <c:if test="${begin < 1}">
                                    <c:set var="begin" value="1"/>
                                    <c:set var="end" value="5"/>
                                </c:if>

                                <!-- 尾溢出 -->
                                <c:if test="${end > requestScope.page.totalPage}">
                                    <c:set var="begin" value="${requestScope.page.totalPage -4}"/>
                                    <c:set var="end" value="${requestScope.page.totalPage}"/>
                                </c:if>
                            </c:otherwise>
                        </c:choose>

                        <!-- 显示页码 -->
                        <c:forEach var="i" begin="${begin}" end="${end}">
                            <!-- 判断是否是当前页 -->
                            <c:if test="${i == requestScope.page.pageCode}">
                                <li class="active"><a href="javascript:void(0);">${i}</a></li>
                            </c:if>
                            <c:if test="${i != requestScope.page.pageCode}">
                                <li>
                                    <a href="<%=basePath%>/user/findByPage?pageCode=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
                                </li>
                            </c:if>
                        </c:forEach>

                        <li>
                            <c:if test="${requestScope.page.pageCode < requestScope.page.totalPage}">
                                <a href="<%=basePath%>/user/findByPage?pageCode=${requestScope.page.pageCode + 1}">&raquo;</a>
                            </c:if>
                        </li>
                        <li>
                            <a href="<%=basePath%>/user/findByPage?pageCode=${requestScope.page.totalPage}"><strong>末页</strong></a>
                        </li>
                    </ul>
                </div>
            </div>
        </form>



    <!-- 删除的模态框 -->
            <!--解决问题是将modal fade改为modal-->
    <div class="modal fade" id="trashModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模糊框头部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                    </button>
                    <h4 class="modal-title" >警告！</h4>
                </div>
                <!-- 模糊框主体 -->
                <div class="modal-body">
                    <strong>你确定要删除吗？</strong>
                </div>
                <!-- 模糊框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal" id="delSure">确定</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

        <!-- 编辑的模态框 -->
        <form class="form-horizontal" role="form" method="post" action="<%=basePath%>/user/updateUser"
              id="form_edit">
            <div class="modal fade" id="editModal" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">修改用户信息</h4>
                        </div>
                        <div class="modal-body" style="margin-left: 80px;">
                            <input name="uid" id="uid" hidden="hidden"/>
                            <div class="form-group form-inline">
                                <label>用户ID号：</label>
                                <input type="text" name="user_id" class="form-control" id="user_id" readonly="readonly"/>
                            </div>
                            <br/>
                            <div class="form-group form-inline">
                                <label>用户姓名：</label>
                                <input type="text" name="user_name" class="form-control" id="user_name"/>
                            </div>
                            <br/>
                            <div class="form-group form-inline">
                                <label>用户性别：</label>
                                <input type="text" name="sex" class="form-control" id="sex"/>
                            </div>
                            <br/>
                            <div class="form-group form-inline">
                                <label>手机号码：</label>
                                <input type="text" name="telephone" class="form-control" id="telephone" onblur="telephone8()"/>
                            </div>

                            <br/>
                        <div class="form-group form-inline">
                            <label>用户住址：</label>
                            <input type="text" name="address" class="form-control" id="address"/>
                        </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="editSure btn btn-info" data-dismiss="modal">提交</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>

        </from>
        </div>
</body>

<script type="text/javascript">
    // 删除信息的方法
    function trash(id) {
        if (!id) {
            alert("error");
        } else {
            $("#delSure").click(function () {
                $.ajax({
                    url: "<%=request.getContextPath()%>/user/deleteUser?id="+id,
                    type: 'POST',
                    success: function (data) {
                        $("body").html(data);
                    }
                });
            });
        }
    }
//判断修改手机号码是的输入格式
    function telephone8() {
             var telephone=$("#telephone").val();
             var mobile=/^1[3|4|5|8][0-9]\d{8}$/;
             $("#telephone2").empty();
        if(!mobile.test(telephone)){
            $("#telephone").after("<span id='telephone2' style='color:red'>手机格式错误</span>");
        }
    }

    // 编辑信息的方法
    function edit(uid) {
        if (!uid) {
            alert("error");
        } else {
            // 先去查询数据
            $.ajax({
                url: '<%=basePath%>/user/findById',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({
                    uid: uid
                }),
                success: function (data) {
                    $("#uid").val(data.uid);
                    $("#user_id").val(data.user_id);
                    $("#user_name").val(data.user_name);
                    $("#sex").val(data.sex);
                    $("#telephone").val(data.telephone);
                    $("#address").val(data.address);

                    $("#editModal").modal('show');

                },error: function () {
                    alert("错误");
                }

            });
        }
    }
    //提交表单的方法
    $(".editSure").click(function () {
        var edit=confirm("是否确认修改该用户信息?");
        if(edit==true)
        { $("#form_edit").submit();}
       else {
           return false;
        }
    });





</script>

</body>
<script type="text/javascript">
      //批量删除的部分
    //全选
    var oall=document.getElementById("all");
    var oid=document.getElementsByName("idd");
    oall.onclick=function(){//勾选全选时
        for(var i=0;i<oid.length;i++){
            //所有的选择框和全选一致
            oid[i].checked=oall.checked;
        }
    };
    //点击复选框
    for(var i=0;i<oid.length;i++){
        oid[i].onclick=function(){
            //判断是否全部选中,遍历集合
            for(var j=0;j<oid.length;j++){
                if(oid[j].checked==false){
                    oall.checked=false;
                    break;
                }else{
                    oall.checked=true;
                }
            }
        };
    }
      /*封面图-批量删除*/
      function del(){
          var r=confirm("是否确认删除所选的记录?");
          if(r==true){
              //确认删除
              var ids="";
              var n=0;
              for(var i=0;i<oid.length;i++){
                  if(oid[i].checked==true){//选中为true
                      var id=oid[i].value;
                      if(n==0){
                          ids+="ids="+id;
                      }else{
                          ids+="&ids="+id;
                      }
                      n++;
                  }
              }
              //上面会拼接出一个名为ids的数组ids=1&ids=2&ids=3&ids=4……
              $.get("<%=request.getContextPath()%>/user/deleteByIds",ids,function(data){

                  if(data=="ok"){
                      //删除成功后，调用action方法刷新页面信息
                      location.reload();
                      $("input[name=id]").removeAttr("checked");
                      alert("批量删除用户成功!");
                  }else{
                      alert("请至少选择条信息删除!");
                  }
              });
              return true;
          }
          else{
              //不删除
              return false;
          }
      }



</script>
</html>